<template>
  <div>
    <h1>Hello world</h1>
    <a-textarea
      v-model:value="source"
      placeholder="Basic usage"
      :rows="10"
      :cols="110"
      show-count
      :maxlength="100"
    />
    <ul>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
    </ul>
    <!-- <Markdown :source="source" /> -->
    <div v-html="compiledMarkdown"></div>
    <div>{{ compiledMarkdown }}</div>
  </div>
</template>

<script>
import { reactive, toRefs, computed } from "vue";
import marked from "marked";
const rendererMD = new marked.Renderer();
marked.setOptions({
  renderer: rendererMD,
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: false,
  smartLists: true,
  smartypants: false,
});
export default {
  setup() {
    const state = reactive({
      count: 0,
      source: "# Hello world",
    });

    const compiledMarkdown = computed(() => {
      return marked(state.source, { sanitize: true });
    });

    return {
      ...toRefs(state),
      compiledMarkdown,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>